<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta http-equiv="Pragma" content="no-cache"> 
  <title>Edit Campaign - Magneto, by Protoweb</title>

  {include file="head-common.html"}

  <style>
    body { background-image: url(none); }
    .main { margin-top: 40px; }
  </style>

  <script src="{views_url}js/lib/jquery-ui.min.js"></script>


  <link href="{views_url}js/lib/valumns/fileuploader.css" rel="stylesheet" type="text/css"> 
  <script src="{views_url}js/lib/valumns/fileuploader.js"></script>

  <script>
    function makeUploader(opts) {
      var uploader = new qq.FileUploader({

        element: document.getElementById('file-uploader'),
        action: "{controllers_url}system/application/controllers/file-uploader.php",
        multiple: false,
        allowedExtensions: ["jpg","png","gif"],
        params: {
          client:   "{$client->slug}",
          campaign: "{$campaign->id}",
          filename: opts.filename,
          width:    opts.width,
          height:   opts.height
        },
        onComplete: function(id, fileName, responseJSON) {
          if(responseJSON.success) {
            now = new Date().getTime();
            jQuery("#" + this.params.filename + " img").attr("src",responseJSON.url+"?"+now);
            jQuery(".qq-upload-list").empty();
          }
        }
      });
    }
  </script>

  <script src="{views_url}js/campaign_edit.js"></script>
  <link rel="stylesheet" type="text/css" media="screen, print" href="{views_url}css/campaign_edit.css" />
  <link rel="stylesheet" type="text/css" media="screen, print" href="{$campaign->css}" />
      
  <script>
  jQuery(document).ready(function() {

    jQuery(".btn-group a").tooltip();

    jQuery(".newsletter").newsletter();
    jQuery("#edit_block").draggable();


    jQuery("#edit_block").on("change", ".pw-image", function(event) {
      jQcomponent = $(this);

      $(".to-cancel").addClass("no-follow");
      $(".to-cancel").addClass("disabled");
      $(".to-save").addClass("no-follow");
      $(".to-save").addClass("disabled");

      jQuery.post("{controllers_url}campaigns/saveimage/{$campaign->id}/", 
        { 
          name:   $(this).attr("rel"),
          url:    $(this).val(),
          width:  $(jQcomponent.attr("rel") + " img").attr("width"),
          height: $(jQcomponent.attr("rel") + " img").attr("height")
        },
        function(data) {
          jQcomponent.val(data);
          now = new Date().getTime();
          $(jQcomponent.attr("rel") + " img").attr("src",data+"?"+now);

          $(".to-cancel").removeClass("no-follow");
          $(".to-cancel").removeClass("disabled");
          $(".to-save").removeClass("no-follow");
          $(".to-save").removeClass("disabled");
        } // funtion(data)
      );
    });


    jQuery('.to-save').on('click',function(event) {
      event.preventDefault();
      jQuery("#tplbody").val(jQuery("#newsletter").html());

      var jQbody = jQuery("#newsletter").clone();
      jQbody.find(".pw-blocktype").remove();
      jQbody.find(".pw-block-action").remove();
      jQbody.find(".pw-block-content").unwrap();
      jQuery("#body").val(jQbody.html());
      
      jQuery.post("{controllers_url}campaigns/save/{$campaign->id}/", jQuery("#form").serialize(),
        function(data) {
          if (data == "success") {
            // se guardó bien, ocultamos el editor
            jQuery("#edit_block").fadeOut();
            return true;
          }
          else {
            alert("Se produjo un error al guardar, intenta nuevamente, por favor.");
            console.log(data);
            return false;
          }
        } // funtion(data)
      );
    });

  });
  
  </script>

</head>

<body>

  {include file="header.html"}

  <div class="main container">

    <form id="form" class="hide" action="" method="post" enctype="multipart/form-data">
        <input name="tplbody" id="tplbody" type="hidden" value="{$campaign->tplbody|htmlentities}" />
        <input name="body" id="body" type="hidden" value="{$campaign->body|htmlentities}" />
    </form>

    <!--
    ****************************
    NEWSLETTER
    ****************************
    -->
    <div class="newsletter">

      <div id="edit_block" class="hide">

        <div class="move-bar">
          <h1>Editor</h1>
        </div>

        <div id="components">
          <!-- aqui se agregaran en tiempo de ejecución los componentes que sean llamados al tocar edit en un elemento -->
        </div>

        <div class="control-group">
          <a class="to-cancel btn" href="#"><i class="icon-ban-circle"></i> Cancelar</a>
          <a class="to-save  btn btn-primary" href="#"><i class="icon-ok icon-white"></i> Guardar</a>
        </div>
        
      </div>

      <div id="newsletter">
        {$campaign->tplbody}
      </div>
      <!-- columna central -->

    </div>
    <!-- newsletter -->

  </div>
  <!-- main container -->

</body>
</html>
